<template>
	<a-form :model="formState" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
		<a-collapse ghost v-model:activeKey="activeKey">
			<a-collapse-panel key="1" header="预设样式">
				<a-row :gutter="[10, 10]">
					<a-col :span="24">
						<a-form-item label="预设样式">
							<a-select v-model:value="presetIndex" placeholder="请选择预设样式" @change="handlePresetChange">
								<a-select-option :value="index" v-for="(item, index) in presets" :key="index">
									{{ item.title }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
			</a-collapse-panel>
			<a-collapse-panel key="2" collapsible="header">
				<template #header>
					<div class="flex items-center" style="pointer-events: none" @click.stop>
						<span>标题配置</span>
						<a-form-item key="titleShow" name="titleShow" class="ml-[30px] mb-[0px]" style="pointer-events: auto">
							<a-switch size="small" v-model:checked="formState.titleShow" />
						</a-form-item>
					</div>
				</template>
				<template v-if="formState.titleShow">
					<a-form-item key="title" label="标题内容" name="title">
						<a-row :gutter="[10, 10]">
							<a-col :span="24"><a-input v-model:value="formState.title" /></a-col>
							<a-col :span="12">
								<a-select v-model:value="formState.titleSize" optionLabelProp="label">
									<a-select-option
										v-for="optionItem in [8, 10, 12, 14, 15, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38]"
										:value="optionItem"
										:key="optionItem"
										:label="optionItem + 'px'"
									>
										{{ optionItem + 'px' }}
									</a-select-option>
								</a-select>
							</a-col>
							<a-col :span="12">
								<color-picker
									v-model:value="formState.titleColor"
									style="height: 32px; overflow: hidden; border: 1px solid #d9d9d9"
								/>
							</a-col>
							<a-col :span="8">
								<a-button
									style="width: 100%; font-weight: 600"
									:type="!formState.titleWeight ? 'default' : 'primary'"
									@click="formState.titleWeight = !formState.titleWeight"
									>B</a-button
								>
							</a-col>
							<a-col :span="8">
								<a-button
									style="width: 100%; font-style: italic; font-weight: 600"
									:type="!formState.titleStyle ? 'default' : 'primary'"
									@click="formState.titleStyle = !formState.titleStyle"
									>I</a-button
								>
							</a-col>
							<a-col :span="8">
								<a-button
									style="width: 100%; font-weight: 600"
									:type="!formState.titleLine ? 'default' : 'primary'"
									@click="formState.titleLine = !formState.titleLine"
									><span style="text-decoration: underline">U</span></a-button
								>
							</a-col>
						</a-row>
					</a-form-item>
					<a-form-item key="align" label="对齐方式" name="align">
						<a-radio-group
							v-model:value="formState.align"
							optionType="button"
							buttonStyle="solid"
							:options="[
								{ label: '向左对齐', value: 'space-between' },
								{ label: '居中对齐', value: 'center' }
							]"
						>
						</a-radio-group>
					</a-form-item>
					<a-form-item key="title" label="标题图标" name="title">
						<a-row :gutter="[10, 10]">
							<a-col :span="12" class="h-[32px] leading-[29px]">
								<a-switch size="small" @click.stop.prevent v-model:checked="formState.titleIconShow" />
							</a-col>
							<template v-if="formState.titleIconShow">
								<a-col :span="12">
									<a-dropdown class="h-[32px] flex items-center justify-between w-[100%]">
										<a class="h-[100%] ant-dropdown-link w-[100%] flex items-center justify-between" @click.prevent>
											<span :class="['iconfont', formState.titleIcon]"></span>
											<DownOutlined />
										</a>
										<template #overlay>
											<div
												class="flex w-[300px] bg-[#fff] flex-wrap shadow-lg rounded-[5px] max-h-[300px] overflow-y-auto"
											>
												<div
													class="m-[15px] text-[20px]"
													v-for="item in iconList"
													:key="item"
													@click="formState.titleIcon = item"
												>
													<span :class="['iconfont', item]"></span>
												</div>
											</div>
										</template>
									</a-dropdown>
								</a-col>
								<a-col :span="12">
									<color-picker
										v-model:value="formState.titleIconColor"
										style="height: 32px; overflow: hidden; border: 1px solid #d9d9d9"
									/>
								</a-col>
								<a-col :span="12">
									<a-select v-model:value="formState.titleIconSize" optionLabelProp="label">
										<a-select-option
											v-for="optionItem in [8, 10, 12, 14, 15, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38]"
											:value="optionItem"
											:key="optionItem"
											:label="optionItem + 'px'"
										>
											{{ optionItem + 'px' }}
										</a-select-option>
									</a-select>
								</a-col>
							</template>
						</a-row>
					</a-form-item>
					<a-form-item key="titleEnd" label="标题尾描述" name="titleEnd">
						<a-row :gutter="[10, 10]">
							<a-col :span="4" class="h-[32px] leading-[29px]">
								<a-switch size="small" @click.stop.prevent v-model:checked="formState.titleEndShow" />
							</a-col>
							<template v-if="formState.titleEndShow">
								<a-col :span="20">
									<a-input v-model:value="formState.titleEnd" />
								</a-col>
								<a-col :span="12">
									<a-select v-model:value="formState.titleEndSize" optionLabelProp="label">
										<a-select-option
											v-for="optionItem in [8, 10, 12, 14, 15, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38]"
											:value="optionItem"
											:key="optionItem"
											:label="optionItem + 'px'"
										>
											{{ optionItem + 'px' }}
										</a-select-option>
									</a-select>
								</a-col>
								<a-col :span="12">
									<color-picker
										v-model:value="formState.titleEndColor"
										style="height: 32px; overflow: hidden; border: 1px solid #d9d9d9"
									/>
								</a-col>
								<a-col :span="8">
									<a-button
										style="width: 100%; font-weight: 600"
										:type="!formState.titleEndWeight ? 'default' : 'primary'"
										@click="formState.titleEndWeight = !formState.titleEndWeight"
										>B</a-button
									>
								</a-col>
								<a-col :span="8">
									<a-button
										style="width: 100%; font-style: italic; font-weight: 600"
										:type="!formState.titleEndStyle ? 'default' : 'primary'"
										@click="formState.titleEndStyle = !formState.titleEndStyle"
										>I</a-button
									>
								</a-col>
								<a-col :span="8">
									<a-button
										style="width: 100%; font-weight: 600"
										:type="!formState.titleEndLine ? 'default' : 'primary'"
										@click="formState.titleEndLine = !formState.titleEndLine"
										><span style="text-decoration: underline">U</span></a-button
									>
								</a-col>
							</template>
						</a-row>
					</a-form-item>
					<a-form-item key="titleEndIcon" label="尾巴图标" name="titleEndIcon">
						<a-row :gutter="[10, 10]">
							<a-col :span="12" class="h-[32px] leading-[29px]">
								<a-switch size="small" @click.stop.prevent v-model:checked="formState.titleEndIconShow" />
							</a-col>
							<template v-if="formState.titleEndIconShow">
								<a-col :span="12">
									<a-dropdown class="h-[32px] flex items-center justify-between w-[100%]">
										<a class="h-[100%] ant-dropdown-link w-[100%] flex items-center justify-between" @click.prevent>
											<span :class="['iconfont', formState.titleEndIcon]"></span>
											<DownOutlined />
										</a>
										<template #overlay>
											<div
												class="flex w-[300px] bg-[#fff] flex-wrap shadow-lg rounded-[5px] max-h-[300px] overflow-y-auto"
											>
												<div
													class="m-[15px] text-[20px]"
													v-for="item in iconList"
													:key="item"
													@click="formState.titleEndIcon = item"
												>
													<span :class="['iconfont', item]"></span>
												</div>
											</div>
										</template>
									</a-dropdown>
								</a-col>
								<a-col :span="12">
									<color-picker
										v-model:value="formState.titleEndIconColor"
										style="height: 32px; overflow: hidden; border: 1px solid #d9d9d9"
									/>
								</a-col>
								<a-col :span="12">
									<a-select v-model:value="formState.titleEndIconSize" optionLabelProp="label">
										<a-select-option
											v-for="optionItem in [8, 10, 12, 14, 15, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38]"
											:value="optionItem"
											:key="optionItem"
											:label="optionItem + 'px'"
										>
											{{ optionItem + 'px' }}
										</a-select-option>
									</a-select>
								</a-col>
							</template>
						</a-row>
					</a-form-item>
				</template>
			</a-collapse-panel>
			<a-collapse-panel key="3" header="图表样式">
				<a-row :gutter="[10, 10]">
					<!--					<a-col :span="24">-->
					<!--						<a-form-item label="图表颜色">-->
					<!--							<ColorSelect v-model:value="formState.chartColor" />-->
					<!--						</a-form-item>-->
					<!--					</a-col>-->
					<a-col :span="24">
						<a-form-item label="外半径">
							<a-slider v-model:value="formState.radius" :min="0.1" :max="1" :step="0.1" />
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item label="内半径">
							<a-slider v-model:value="formState.innerRadius" :min="0.1" :max="0.9" :step="0.1" />
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item label="显示标签">
							<a-switch v-model:checked="formState.showLabel" />
						</a-form-item>
					</a-col>
					<a-col :span="24" v-if="formState.showLabel">
						<a-form-item label="标签类型">
							<a-select v-model:value="formState.labelType">
								<a-select-option value="inner">内部标签</a-select-option>
								<a-select-option value="outer">外部标签</a-select-option>
								<a-select-option value="spider">蜘蛛标签</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item label="显示中心统计">
							<a-switch v-model:checked="formState.showStatistic" />
						</a-form-item>
					</a-col>
					<a-col :span="24" v-if="formState.showStatistic">
						<a-form-item label="统计标题">
							<a-input v-model:value="formState.statisticTitle" placeholder="请输入统计标题" />
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item label="显示图例">
							<a-switch v-model:checked="formState.showLegend" />
						</a-form-item>
					</a-col>
					<a-col :span="24" v-if="formState.showLegend">
						<a-form-item label="图例位置">
							<a-select v-model:value="formState.legendPosition">
								<a-select-option value="top">顶部</a-select-option>
								<a-select-option value="bottom">底部</a-select-option>
								<a-select-option value="left">左侧</a-select-option>
								<a-select-option value="right">右侧</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
			</a-collapse-panel>
			<a-collapse-panel key="4" header="整体外观" collapsible="header">
				<a-form-item key="bg" label="背景" name="bg">
					<a-row :gutter="[10, 10]">
						<!-- <a-col :span="12">
							<a-dropdown class="h-[32px]">
								<a class="h-[100%] ant-dropdown-link w-[100%] flex items-center justify-between" @click.prevent>
									<span :class="['iconfont', formState.bgImg]"></span>
									<DownOutlined />
								</a>
								<template #overlay>
									<div class="flex w-[300px] bg-[#fff] flex-wrap shadow-lg rounded-[5px] max-h-[300px] overflow-y-auto">
										<div
											class="m-[15px] text-[20px]"
											v-for="item in iconList"
											:key="item"
											@click="formState.bgImg = item"
										>
											<span :class="['iconfont', item]"></span>
										</div>
									</div>
								</template>
							</a-dropdown>
						</a-col> -->
						<a-col :span="24">
							<color-picker
								v-model:value="formState.bgColor"
								v-model:gradientColor="formState.bgColor"
								useType="both"
								style="height: 32px; overflow: hidden; border: 1px solid #d9d9d9"
							/>
						</a-col>
					</a-row>
				</a-form-item>

				<a-form-item key="border" label="边框" name="border">
					<a-row :gutter="[10, 10]">
						<a-col :span="8">
							<a-select v-model:value="formState.borderStyle" optionLabelProp="label">
								<a-select-option
									v-for="optionItem in [
										{ label: '一', value: 'solid' },
										{ label: '- - -', value: 'dotted' },
										{ label: '· · ·', value: 'dashed' }
									]"
									:value="optionItem.value"
									:key="optionItem.value"
									:label="optionItem.label"
								>
									{{ optionItem.label }}
								</a-select-option>
							</a-select>
						</a-col>
						<a-col :span="8">
							<color-picker
								v-model:value="formState.borderColor"
								style="height: 32px; overflow: hidden; border: 1px solid #d9d9d9"
							/>
						</a-col>
						<a-col :span="8">
							<a-select v-model:value="formState.borderWidth" optionLabelProp="label">
								<a-select-option
									v-for="optionItem in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
									:value="optionItem"
									:key="optionItem"
									:label="optionItem + 'px'"
								>
									{{ optionItem + 'px' }}
								</a-select-option>
							</a-select>
						</a-col>
					</a-row>
				</a-form-item>
				<a-form-item label="内边距">
					<a-row :gutter="[10, 10]">
						<a-col :span="10">
							<a-input-number :min="0" @change="paddingChange" v-model:value="formState.paddingT" style="width: 100%">
								<template #prefix> 上 </template>
							</a-input-number>
						</a-col>
						<a-col :span="10">
							<a-input-number :min="0" @change="paddingChange" v-model:value="formState.paddingB" style="width: 100%">
								<template #prefix> 下 </template>
							</a-input-number>
						</a-col>
						<a-col :span="4">
							<a-button
								style="width: 100%; font-weight: 600"
								:type="!formState.paddingLock ? 'default' : 'primary'"
								@click="formState.paddingLock = !formState.paddingLock"
							>
								<template #icon>
									<LockOutlined v-if="formState.paddingLock" />
									<UnlockOutlined v-else />
								</template>
							</a-button>
						</a-col>
						<a-col :span="10">
							<a-input-number :min="0" @change="paddingChange" v-model:value="formState.paddingL" style="width: 100%">
								<template #prefix> 左 </template>
							</a-input-number>
						</a-col>
						<a-col :span="10">
							<a-input-number :min="0" @change="paddingChange" v-model:value="formState.paddingR" style="width: 100%">
								<template #prefix> 右 </template>
							</a-input-number>
						</a-col>
					</a-row>
				</a-form-item>
				<a-form-item key="bgR" label="背景圆角" name="bgR">
					<a-row :gutter="[10, 10]">
						<a-col :span="10">
							<a-input-number :min="0" @change="bgRChange" v-model:value="formState.bgRTL" style="width: 100%">
								<template #prefix>
									<RadiusUpleftOutlined />
								</template>
							</a-input-number>
						</a-col>
						<a-col :span="10">
							<a-input-number :min="0" @change="bgRChange" v-model:value="formState.bgRTR" style="width: 100%">
								<template #prefix>
									<RadiusUprightOutlined />
								</template>
							</a-input-number>
						</a-col>
						<a-col :span="4">
							<a-button
								style="width: 100%; font-weight: 600"
								:type="!formState.bgRLock ? 'default' : 'primary'"
								@click="formState.bgRLock = !formState.bgRLock"
							>
								<template #icon>
									<LockOutlined v-if="formState.bgRLock" />
									<UnlockOutlined v-else />
								</template>
							</a-button>
						</a-col>
						<a-col :span="10">
							<a-input-number :min="0" @change="bgRChange" v-model:value="formState.bgRBL" style="width: 100%">
								<template #prefix>
									<RadiusBottomleftOutlined />
								</template>
							</a-input-number>
						</a-col>
						<a-col :span="10">
							<a-input-number :min="0" @change="bgRChange" v-model:value="formState.bgRBR" style="width: 100%">
								<template #prefix>
									<RadiusBottomrightOutlined />
								</template>
							</a-input-number>
						</a-col>
					</a-row>
				</a-form-item>
				<a-form-item key="shadow" label="阴影" name="shadow">
					<a-row :gutter="[10, 10]">
						<a-col :span="12">
							<a-input-number
								v-model:value="formState.shadowX"
								@change="() => formState.shadowX.replace(/[^0-9]/g, '')"
								style="width: 100%"
							>
								<template #prefix> X </template>
							</a-input-number>
						</a-col>
						<a-col :span="12">
							<a-input-number v-model:value="formState.shadowY" style="width: 100%">
								<template #prefix> Y </template>
							</a-input-number>
						</a-col>
						<a-col :span="12">
							<color-picker
								v-model:value="formState.shadowColor"
								style="height: 32px; overflow: hidden; border: 1px solid #d9d9d9"
							/>
						</a-col>
						<a-col :span="12">
							<a-input-number v-model:value="formState.shadowDegree" style="width: 100%">
								<template #prefix> 模糊 </template>
							</a-input-number>
						</a-col>
					</a-row>
				</a-form-item>
			</a-collapse-panel>
		</a-collapse>
	</a-form>
</template>

<script setup>
	import config from '../config'
	import { reactive, defineProps, defineEmits, ref, watch } from 'vue'
	import { cloneDeep } from 'lodash-es'
	import ColorPicker from '@/components/ColorPicker/index.vue'
	// import ColorSelect from '@/views/plugin/dashboard/plugin/public/ColorSelect/ColorSelect.vue'
	// import IconSelect from '@/views/plugin/dashboard/plugin/public/IconSelect/IconSelect.vue'
	// import UploadImg from '@/views/plugin/dashboard/plugin/public/UploadImg/UploadImg.vue'
	import iconFont from '../../../public/iconFont'
	const iconList = ref(iconFont)
	import presets from './pesets'

	const emits = defineEmits(['upDataConfig'])
	const activeKey = ref(['1'])
	const presetIndex = ref(null)

	const props = defineProps({
		config: {
			type: Object,
			default: () => {
				return cloneDeep(config)
			}
		}
	})

	const formState = reactive(cloneDeep(props.config.style))

	// 更新组件内容
	watch(
		() => formState,
		(newVal) => {
			emits('upDataConfig', { ...props.config, style: newVal })
		},
		{
			deep: true
		}
	)

	// 处理预设样式变更
	const handlePresetChange = (index) => {
		const preset = presets[index]
		Object.keys(preset).forEach((key) => {
			formState[key] = preset[key]
		})
	}

	const iconRChange = (e) => {
		if (formState.iconRLock) {
			formState.iconRTL = e
			formState.iconRTR = e
			formState.iconRBL = e
			formState.iconRBR = e
		}
	}
	const bgRChange = (e) => {
		if (formState.bgRLock) {
			formState.bgRTL = e
			formState.bgRTR = e
			formState.bgRBL = e
			formState.bgRBR = e
		}
	}
	const paddingChange = (e) => {
		if (formState.paddingLock) {
			formState.paddingT = e
			formState.paddingR = e
			formState.paddingB = e
			formState.paddingL = e
		}
	}
</script>

<style scoped>
	.form-item {
		margin-bottom: 0;
	}
	:deep(.ant-dropdown-link) {
		border: 1px solid #d9d9d9;
		padding: 0px 5px;
	}
	:deep(.ant-radio-group) {
		display: flex;
		text-align: center;
	}
	:deep(.vc-color-wrap) {
		height: 100%;
		line-height: 32px !important;
	}
	:deep(.ant-collapse-header) {
		display: flex;
		align-items: center !important;
	}
	:deep(.ant-dropdown-link) {
		border: 1px solid #d9d9d9;
		padding: 0px 5px;
	}
	:deep(.ant-radio-button-wrapper) {
		padding: 0px;
		width: 100%;
	}
	:deep(.ant-radio-group) {
		display: flex;
		text-align: center;
	}
</style>
